<template>
  <div>
    <a-modal
      title="选择班级"
      :visible="visible"
      @ok="handleOk"
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
      width="750px"
    >
      <a-input-search
        v-model="name"
        style="width:200px;margin-bottom:20px;"
        placeholder="班级名称"
        clearable
      ></a-input-search>
      <a-table
        :columns="columns"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        class="user_management_table"
        :pagination="false"
        :dataSource="tableData"
        :scroll="{  y: 340 }"
      >
        <span slot="teacher_name" slot-scope="text,record">
            <span v-for="(item,index) in record.teacher" :key="index">
                {{item.name}}
                <span v-if="index!==record.teacher.length-1">,</span>
            </span>
        </span>
        <span slot="upper_limit" slot-scope="text,record">
          {{record.student_num}}/  <span v-if="record.upper_limit">{{record.upper_limit}}</span><span v-else>未设置</span>
        </span>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
import { classList } from '@/api/class'
const columns = [
  {
    title: '班级名称',
    dataIndex: 'name',
    ellipsis:true,
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '班级老师',
    dataIndex: 'teacher',
    ellipsis:true,
    scopedSlots: { customRender: 'teacher_name' }
  },
  {
    title: '人数/容量',
    scopedSlots: { customRender: 'upper_limit' }
  }
]
export default {
  name: 'classModel',
  props: {
    classArr: Array
  },
  data() {
    return {
      selectedRowKeys: [], //多选
      visible: false,
      columns,
      tableData: [],
      confirmLoading: false,
      name: '' // 查询
    }
  },
  methods: {
    handleOk() {
      let arr = []
      if (this.selectedRowKeys !== '') {
        this.selectedRowKeys.forEach(val => {
          this.tableData.forEach((item, index) => {
            if (index == val) {
              arr.push({
                id: item.id,
                name: item.name
              })
            }
          })
        })
      }
      this.$emit('reload', arr)
      this.visible = false
    },
    showModel() {
      this.confirmLoading = true
      classList({
        school_id: this.$store.state.user.school,
        keywords: this.name,
        pageSize: 999999999999
      })
        .then(res => {
          this.confirmLoading = false
          this.tableData = res.data
          if (this.classArr.length > 0) {
            let array = []
            this.tableData.forEach((val, index) => {
              this.classArr.forEach(item => {
                if (val.id == item) {
                  array.push(index)
                }
              })
            })
            this.selectedRowKeys = array
          } else {
            this.selectedRowKeys = []
          }
        })
        .catch(err => {
          this.confirmLoading = false
          this.$message.error(err.data.message||'获取班级列表失败，请稍后重试')
        })
      this.visible = true
    },
    handleCancel() {
      this.visible = false
      this.selectedRowKeys = []
    },
    onSelectChange(selectedRowKeys, index) {
      this.selectedRowKeys = selectedRowKeys
    }
  },
  watch: {
    name(val) {
      this.confirmLoading = true
      classList({
        school_id: this.$store.state.user.school,
        keywords: this.name,
        pageSize: 999999999999
      })
        .then(res => {
          this.confirmLoading = false
          this.tableData = res.data
        })
        .catch(err => {
          this.confirmLoading = false
          this.$message.error(err.data.message||'获取班级列表失败，请稍后重试')
        })
    }
  }
}
</script>

<style lang="less" scoped>
</style>